<template>
  <div class="container">
    <div class="body">
      <span class="title">{{ model.title }}</span>
      <div class="subhead">
        <span>相关技术</span><span v-for="(item,i) in model.checkList" :key="i" class="catas">{{item}}</span>
        <span class="time">发表时间</span><span>{{model.createdAt | date}}</span>
      </div>
      <div v-html="model.banner" class="banner"></div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    id: { required: true },
  },
  data() {
    return {
      model: {}
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`/read/${this.id}`)
      this.model = res.data
    }
  },
  filters: {
    //格式化时间的插件
    date(val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style lang="scss">
.container {
  width: 75%;
  margin: 25px auto;
  .body {
    text-align: center;
    .title {
      font-size: 24px;
    }
    .subhead {
      display: flex;
      justify-content: center;
      font-size: 11px;
      margin-top: 8px;
      color: #67C23A;
      span {
        margin: 0 5px;
      }
      .time {
        margin-left: 20px;
      }
    }
    .banner {
      margin-top: 15px;
      text-align: left;
      font-size: 14px;
    }
  }
}
</style>
